<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快码签字 - 签名工具</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        min-width: 500px;
      }
      
      .toolbar {
        padding: 15px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
      }
      
      .signature-section {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 15px;
      }
      
      .input-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      
      .input-group label {
        font-weight: 500;
        font-size: 14px;
        color: #2d3748;
      }
      
      .input-group input {
        padding: 10px 12px;
        border: 2px solid #e1e5e9;
        border-radius: 6px;
        font-size: 14px;
        transition: border-color 0.3s ease;
      }
      
      .input-group input:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
      }
      
      .input-group input::placeholder {
        color: #a0aec0;
      }
      
      .btn {
        padding: 10px 16px;
        border: none;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
      }
      
      .btn-primary {
        background: #4299e1;
        color: white;
      }
      
      .btn-primary:hover {
        background: #3182ce;
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
      
      .btn-primary:active {
        transform: translateY(0);
      }
      
      .btn-secondary {
        background: #48bb78;
        color: white;
      }
      
      .btn-secondary:hover {
        background: #38a169;
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
      
      .btn-text {
        display: flex;
        align-items: center;
        gap: 5px;
      }
      
      canvas {
        width: 100%;
        max-width: 100%;
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        margin: 15px 0;
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="toolbar">
      <h2>快码截屏 - 签名工具</h2>
    </div>

    <div class="signature-section">
      <div class="input-group">
        <label for="signatureText">输入签名文本</label>
        <input type="text" id="signatureText" placeholder="请输入您的签名">
        <button id="generateSignature" class="btn btn-primary">
          <span class="btn-text">生成签名图片</span>
        </button>
      </div>
      <button id="saveBtn" class="btn btn-secondary">
        <span class="btn-text">保存签名</span>
      </button>
    </div>

    <canvas id="editorCanvas"></canvas>

    <script src="popup.js"></script>
  </body>
</html>